<template>
	<div>
		<a-card :bordered="false" :bodyStyle="tstyle">
			<div class="table-page-search-wrapper" v-if="hasPerm('xjbSysdetailExt:page')">
				<a-form layout="inline">
					<a-row :gutter="48">
						<!-- <a-col :md="6" :sm="24">
							<a-form-item label="系统编号">
								<a-input v-model="queryParam.sysid" allow-clear placeholder="请输入系统编号" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="24">
							<a-form-item label="系统名称">
								<a-input v-model="queryParam.sysname" allow-clear placeholder="请输入系统名称" />
							</a-form-item>
						</a-col> -->
						<a-col :md="6" :sm="24">
							<a-form-item label="关联系统">
								<a-select v-model="queryParam.sysid" style="width: 100%" placeholder="请选择关联系统"
									allow-clear :showArrow="true" :maxTagCount="10">
									<a-select-option v-for="(item,index) in xjb_sysidsData" :key="index"
										:value="item.code">
										{{ item.code }}-{{ item.name }}
									</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>

						<a-col :md="6" :sm="24">
							<a-form-item label="属性名称">
								<a-input v-model="queryParam.name" allow-clear placeholder="请输入属性名称" />
							</a-form-item>
						</a-col>

						<!-- <a-col :md="6" :sm="24">
								<a-form-item label="属性名称">
									<a-input v-model="queryParam.name" allow-clear placeholder="请输入属性名称" />
								</a-form-item>
							</a-col>
							<a-col :md="6" :sm="24">
								<a-form-item label="属性值">
									<a-input v-model="queryParam.value" allow-clear placeholder="请输入属性值" />
								</a-form-item>
							</a-col> -->
						<a-col :md="6" :sm="24">
							<a-form-item label="有效性">
								<a-select v-model="queryParam.vflag" style="width: 100%" placeholder="1有效,0无效"
									allow-clear :showArrow="true">
									<a-select-option value="1">1-有效 </a-select-option>
									<a-select-option value="0">0- 无效 </a-select-option>
								</a-select>
							</a-form-item>
						</a-col>

						<a-col :md="6" :sm="24">
							<span class="table-page-search-submitButtons">
								<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
								<a-button style="ma4105700r10gin-left: 8px" @click="() => queryParam = {}">重置</a-button>
								<!-- <a @click="toggleAdvanced" style="margin-left: 8px">
									{{ advanced ? '收起' : '展开' }}
									<a-icon :type="advanced ? 'up' : 'down'" />
								</a> -->
							</span>
						</a-col>
					</a-row>
				</a-form>
			</div>
		</a-card>
		<a-card :bordered="false">
			<s-table ref="table" :columns="columns" :data="loadData" :alert="options.alert"
				:rowKey="(record) => record.id" :rowSelection="options.rowSelection">
				<template class="table-operator" slot="operator" v-if="hasPerm('xjbSysdetailExt:add')">
					<a-button type="primary" v-if="hasPerm('xjbSysdetailExt:add')" icon="plus"
						@click="$refs.addForm.add()">新增附属信息</a-button>
					<!-- <a-button type="danger" :disabled="selectedRowKeys.length < 1"
						v-if="hasPerm('xjbSysdetailExt:delete')" @click="batchDelete">
						<a-icon type="delete" />批量删除
					</a-button> -->
					<!-- <x-down v-if="hasPerm('xjbSysdetailExt:export')" ref="batchExport" @batchExport="batchExport" /> -->
				</template>
				<span slot="action" slot-scope="text, record">
					<a v-if="hasPerm('xjbSysdetailExt:edit')" @click="$refs.editForm.edit(record)">编辑</a>
					<a-divider type="vertical"
						v-if="hasPerm('xjbSysdetailExt:edit') & hasPerm('xjbSysdetailExt:delete')" />
					<a-popconfirm v-if="hasPerm('xjbSysdetailExt:delete')" placement="topRight" title="确认删除？"
						@confirm="() => singleDelete(record)">
						<a>删除</a>
					</a-popconfirm>
				</span>
			</s-table>
			<add-form ref="addForm" @ok="handleOk" />
			<edit-form ref="editForm" @ok="handleOk" />
		</a-card>
	</div>
</template>
<script>
	import {
		STable,
		XDown
	} from '@/components'
	import {
		xjbSysdetailExtPage,
		xjbSysdetailExtDelete,
		xjbSysdetailExtExport
	} from '@/api/modular/main/xjbsysdetailext/xjbSysdetailExtManage'
	import addForm from './addForm.vue'
	import editForm from './editForm.vue'
	export default {
		components: {
			STable,
			addForm,
			editForm,
			XDown
		},
		data() {
			return {
				xjb_sysidsData: [],
				// 高级搜索 展开/关闭
				advanced: false,
				// 查询参数
				queryParam: {},
				// 表头
				columns: [{
						title: '系统编号',
						align: 'center',
						dataIndex: 'sysid'
					},
					{
						title: '系统名称',
						align: 'center',
						dataIndex: 'sysname'
					},
					{
						title: '属性名称',
						align: 'center',
						dataIndex: 'name'
					},
					{
						title: '属性值',
						align: 'center',
						dataIndex: 'value'
					},
					{
						title: '有效性:1有效,0无效',
						align: 'center',
						dataIndex: 'vflag'
					}
				],
				tstyle: {
					'padding-bottom': '0px',
					'margin-bottom': '10px'
				},
				// 加载数据方法 必须为 Promise 对象
				loadData: parameter => {
					return xjbSysdetailExtPage(Object.assign(parameter, this.queryParam)).then((res) => {
						return res.data
					})
				},
				selectedRowKeys: [],
				selectedRows: [],
				options: {
					alert: {
						show: true,
						clear: () => {
							this.selectedRowKeys = []
						}
					},
					rowSelection: {
						selectedRowKeys: this.selectedRowKeys,
						onChange: this.onSelectChange
					}
				}
			}
		},
		created() {
			this.getxjbSysdetailList()
			if (this.hasPerm('xjbSysdetailExt:edit') || this.hasPerm('xjbSysdetailExt:delete')) {
				this.columns.push({
					title: '操作',
					width: '150px',
					dataIndex: 'action',
					scopedSlots: {
						customRender: 'action'
					}
				})
			}
		},
		methods: {
			getxjbSysdetailList() {
				this.xjb_sysidsData = this.$options.filters['dictData']('xjb_sysdetail')
			},
			/**
			 * 单个删除
			 */
			singleDelete(record) {
				const param = [{
					'id': record.id
				}]
				this.xjbSysdetailExtDelete(param)
			},
			/**
			 * 批量删除
			 */
			batchDelete() {
				const paramIds = this.selectedRowKeys.map((d) => {
					return {
						'id': d
					}
				})
				this.xjbSysdetailExtDelete(paramIds)
			},
			xjbSysdetailExtDelete(record) {
				xjbSysdetailExtDelete(record).then((res) => {
					if (res.success) {
						this.$message.success('删除成功')
						this.$refs.table.clearRefreshSelected()
					} else {
						this.$message.error('删除失败') // + res.message
					}
				})
			},
			toggleAdvanced() {
				this.advanced = !this.advanced
			},
			/**
			 * 批量导出
			 */
			batchExport() {
				const paramIds = this.selectedRowKeys.map((d) => {
					return {
						'id': d
					}
				})
				xjbSysdetailExtExport(paramIds).then((res) => {
					this.$refs.batchExport.downloadfile(res)
				})
			},
			handleOk() {
				this.$refs.table.refresh()
			},
			onSelectChange(selectedRowKeys, selectedRows) {
				this.selectedRowKeys = selectedRowKeys
				this.selectedRows = selectedRows
			}
		}
	}
</script>
<style lang="less">
	.table-operator {
		margin-bottom: 18px;
	}

	button {
		margin-right: 8px;
	}
</style>
